<template>
  <div class="login-reg">
    <div class="h-title">
      <span>{{title}}</span>
    </div>
    <van-form>
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" @click="register">注册</van-button>
      </div>
    </van-form>
    <div class="go-register" @click="goLogin">
      已经注册? 点击登录
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      title: this.$route.meta.title,
      username: '',
      password: ''
    }
  },
  methods: {
    register(values) {
      if (!this.username || !this.password) return Toast('用户名或密码不能为空')
      localStorage.user = JSON.stringify({ username: this.username, password: this.password })
      Toast('注册成功')
      setTimeout(() => {
        this.$router.push('/login')
      }, 1500)
    },
    goLogin() {
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="scss" >
.login-reg {
  .h-title {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: #1989fa;
  }
  .go-register {
    padding-right: 50px;
    margin-top: 20px;
    text-align: right;
    color: #999;
    font-size: 14px;
  }
}
</style>